<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <style>
      /* 设置楷体字体 */
      @font-face {
        font-family: 'KaiTi';
        src: url('path/to/KaiTi.ttf'); /* 楷体字体文件的路径 */
      }
    </style>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 800px;height:500px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '叶玉婷 全国城市人工智能岗位平均工资排序',
          left: 'center',
          textStyle: {
            color: '#000', // 黑色
            fontSize: 20,
            fontWeight: 'bold',
            fontFamily: 'KaiTi' // 设置楷体
          },
          subtextStyle: {
            color: '#000', // 黑色
            fontSize: 14,
            fontFamily: 'KaiTi' // 设置楷体
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: '#ccc',
          borderWidth: 1,
          textStyle: {
            color: '#000', // 黑色
            fontFamily: 'KaiTi' // 设置楷体
          }
        },
        legend: {
          data: ['平均工资'],
          left: '80%',
          textStyle: {
            color: '#000', // 黑色
            fontSize: 14,
            fontFamily: 'KaiTi' // 设置楷体
          },
          backgroundColor: 'rgba(255, 192, 203, 0.2)' // 粉色透明
        },
        xAxis: {
          type: 'category',
          data: ['上海', '北京', '南京', '成都', '西安', '深圳', '杭州', '武汉', '广州'],
          axisLine: {
            lineStyle: {
              color: '#000' // 黑色
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#EE82EE' // 紫色
            }
          },
          axisLabel: {
            fontFamily: 'KaiTi', // 设置楷体
            color: '#000' // 黑色
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#000' // 黑色
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#EE82EE' // 紫色
            }
          },
          axisLabel: {
            fontFamily: 'KaiTi', // 设置楷体
            color: '#000' // 黑色
          }
        },
        series: [
          {
            name: '平均工资',
            type: 'bar',
            data: [
              { value: 18780 },
              { value: 17950 },
              { value: 16901 },
              { value: 16830 },
              { value: 16818 },
              { value: 16369 },
              { value: 15037 },
              { value: 14944 },
              { value: 13179 }
            ],
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgba(255,192,203,1)'}, {offset: 1, color: 'rgba(255,182,193,1)'}]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgba(255,165,0,1)'}, {offset: 1, color: 'rgba(255,193,193,1)'}]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgba(255,105,180,1)'}, {offset: 1, color: 'rgba(255,140,105,1)'}]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgba(255,192,203,1)'}, {offset: 1, color: 'rgba(255,182,193,1)'}]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgba(255,165,0,1)'}, {offset: 1, color: 'rgba(255,193,193,1)'}]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgba(255,105,180,1)'}, {offset: 1, color: 'rgba(255,140,105,1)'}]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgba(255,192,203,1)'}, {offset: 1, color: 'rgba(255,182,193,1)'}]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgba(255,165,0,1)'}, {offset: 1, color: 'rgba(255,193,193,1)'}]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgba(255,105,180,1)'}, {offset: 1, color: 'rgba(255,140,105,1)'}])
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
              }
            },
            barWidth: '60%',
            animationEasing: 'elasticOut',
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          }
        ],
        dataZoom: [
          {
            type: 'slider',
            start: 0,
            end: 50
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>